﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="Description" content="ChronoZoom is an open-source community project dedicated to visualizing the history of everything." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <!-- WinJS references -->
    <!--
    <script src="NewScripts/external/exceptional.js"></script>
    <script type="text/javascript">
        Exceptional.setKey('d9b3447eac902a758c3701906bce376fbe510488');

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-29180487-2']);
        _gaq.push(['_setDomainName', 'auto']);
        _gaq.push(['_setAllowLinker', true]);
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

            var lastHashData = null;
            window.onhashchange = function () {
                var hashData = window.location.hash.split("@")[0];
                if (hashData !== lastHashData) {
                    _gaq.push(['_trackEvent', 'url', 'hash', hashData, 1, lastHashData === null /* Non-Interactive*/]);
                    lastHashData = hashData;
                }
            }
        })();
    </script>
        -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="/NewStyles/cz.css" />
    <link rel="stylesheet" type="text/css" href="/NewStyles/cz.datepicker.css" />
    <link rel="stylesheet" type="text/css" href="/NewStyles/timescale.css" />
    <script src="/Scripts/jquery-1.8.2-win8-1.0.js"></script>
    <script type="text/javascript" src="/NewScripts/external/jquery.cookie.js"></script>
    <script type="text/javascript" src="/NewScripts/external/rx.js"></script>
    <script type="text/javascript" src="/NewScripts/external/rx.jQuery.js"></script>
    <script src="Scripts/seadragon-dev.js"></script>
    <script type="text/javascript" src="/NewScripts/external/mouseWheelPlugin.js"></script>
<script src="/NewScripts/external/jquery-ui-1.8.16.custom.min.js"></script>

    <script type="text/javascript" src="/NewScripts/cz.settings.js"></script>
    <script type="text/javascript" src="/NewScripts/common.js"></script>
    <script type="text/javascript" src="/NewScripts/viewport.js"></script>
    <script type="text/javascript" src="/NewScripts/viewportAnimation.js"></script>
    <script type="text/javascript" src="/NewScripts/gestures.js"></script>
    <script type="text/javascript" src="/NewScripts/virtualCanvas.js"></script>
    <script type="text/javascript" src="/NewScripts/vccontent.js"></script>
    <script type="text/javascript" src="/NewScripts/viewportController.js"></script>
    <script type="text/javascript" src="/NewScripts/urlnav.js"></script>
    <script type="text/javascript" src="/NewScripts/layout.js"></script>
    <script type="text/javascript" src="/NewScripts/tours.js"></script>
    <script type="text/javascript" src="/NewScripts/search.js"></script>
    <script type="text/javascript" src="/NewScripts/bibliography.js"></script>
    <script type="text/javascript" src="/NewScripts/breadCrumbs.js"></script>

    <script type="text/javascript" src="/NewScripts/authoring.js"></script>
    <script type="text/javascript" src="/NewScripts/authoring.ui.js"></script>
    <script type="text/javascript" src="/NewScripts/czservice.js"></script>
    <script type="text/javascript" src="/NewScripts/cz.data.js"></script>
    <script type="text/javascript" src="/NewScripts/timescale.js"></script>

    <script type="text/javascript" src="/NewScripts/uiloader.js"></script>
    <script type="text/javascript" src="/NewScripts/controls/cz.datepicker.js"></script>
    <script type="text/javascript" src="/NewScripts/controls/listboxbase.js"></script>
    <script type="text/javascript" src="/NewScripts/controls/formbase.js"></script>
    <script type="text/javascript" src="/NewScripts/cz.dates.js"></script>

    <script type="text/javascript" src="/NewScripts/external/ACS.js"></script>
    
    <!--
    <script type="text/javascript" src="/ui/contentitem-listbox.js"></script>
    <script type="text/javascript" src="/ui/auth-edit-timeline.js"></script>
    <script type="text/javascript" src="/ui/auth-edit-exhibit.js"></script>
    <script type="text/javascript" src="/ui/auth-edit-contentitem-form.js"></script>
    <script type="text/javascript" src="/ui/header-edit.js"></script>
        -->
    <!--[if IE]>
    <script type="text/javascript" src="/NewScripts/regimesIE.js"></script>
    <![endif]-->

    <script type="text/javascript" src="/NewScripts/cz.js"></script>
    <title>ChronoZoom</title>
</head>
<body>
    <div id="content">
        <div id="axis" style="position: relative;">
        </div>

        <div id="vc-container">
            <div id="vc">
                <div id="layerTimelines" onselectstart="return false;">
                </div>
                <!--for popup's-->
                <p class="bubbleInfo" style="display: inline-block; z-index: 3000;" id="defaultBox">
                    <span></span>
                </p>
                <!--//////////-->
                <div id="layerInfodots" onselectstart="return false;">
                </div>
                <div id="iframe_layer" onselectstart="return false;">
                </div>
            </div>
        </div>

        <div id="search" class="czWindow" style="z-index: 2010; max-height: 250px; display: none">
            <div class="header unselectable" onselectstart="return false;">
                Search
            </div>
            <div>
                <input id="searchTextBox" class="czTextBox emptyTextBox" style="margin: 10px 10px 10px 10px; width: 190px"
                    value="type here..." />
            </div>
            <div class="searchResults" style="height: auto; max-height: 140px">
            </div>
            <div>
                <img src="/Images/loading.gif" style="width: 190px; margin-left: 10px; margin-bottom: 10px; height: 20px; display: none;" alt="Searching..." id="loadingImage" />
            </div>
        </div>

        <div id="tours" class="czWindow" onselectstart="return false;" style="display: none">
            <div class="header unselectable">
                Tours
            </div>
            <div id="tours-narration" class="narration unselectable">
                Narration: <span id="tours-narration-on" class="narration-selected">ON</span> |
                <span id="tours-narration-off">OFF</span>
            </div>
            <div id="tours-content" class="content">
            </div>
        </div>

        <div id="bookmarks" class="bookmarksWindow unselectable" onselectstart="return false;" style="display: none">
            <img id="bookmarksCollapse" src="/Images/collapse-left.png" class="headerButton" />
            <div class="header">
            </div>
            <div class="slideHeader">
            </div>
            <div class="slideText">
            </div>
            <div class="slideFooter">
            </div>
        </div>

        <div id="bibliographyBack" class="biblBack">
            <div id="bibliographyOut" class="biblOuterWindow">
                <div id="bibliography" class="biblWindow">
                    <img class="closeButton unselectable" id="biblCloseButton" src="/Images/close_off.png" alt="Close" onselectstart="return false;" />
                    <div class="title" onselectstart="return false;">
                        <span>Infodot name</span> &gt; Bibliography
                    </div>
                    <div class="sources">
                    </div>
                </div>
            </div>
        </div>

        <div id="profile-form" class="cz-form unselectable"></div>
        <div id="login-form" class="cz-form unselectable"></div>
        <div id="header-edit-form" class="cz-form cz-header-edit-form unselectable">
        </div>

        <div id="auth-edit-timeline-form" class="cz-form cz-form-timeline unselectable">
        </div>
        <div id="auth-edit-exhibit-form" class="cz-form cz-form-exhibit unselectable">
		</div>
        <div id="auth-edit-contentitem-form" class="cz-form cz-form-contentitem unselectable">
        </div>

    </div>
    <div id="header" class="unselectable">
        <div class="fleft">
            <ul>
                <li class="fleft">
                    <div class="header-logo"></div>
                </li>
                <li class="fleft">
                    <div id="regime-link-cosmos" class="regime-link">Cosmos</div>
                </li>
                <li class="fleft">
                    <div id="regime-link-earth" class="regime-link">Earth</div>
                </li>
                <li class="fleft">
                    <div id="regime-link-life" class="regime-link">Life</div>
                </li>
                <li class="fleft">
                    <div id="regime-link-prehistory" class="regime-link">Prehistory</div>
                </li>
                <li class="fleft">
                    <div id="regime-link-humanity" class="regime-link">Humanity</div>
                </li>
            </ul>
        </div>
        <div class="fright">
            <ul>
                <li class="fleft">
                    <div id="tours_index" class="header-icon tour-icon" title="Take a guided tour" data-enabled="true"></div>
                </li>
                <li class="fleft">
                    <div id="search_button" class="header-icon search-icon" title="Search ChronoZoom" data-enabled="true"></div>
                </li>
                <li class="fleft">
                    <div class="header-icon edit-icon" title="Create your events" data-enabled="true"></div>
                </li>
                <li class="fleft">
                    <div style="display: none" id="login-panel">
                        <label for="login-button" class="auth-panel-login">Sign in</label
                        ><div id="login-button" class="header-icon profile-icon" title="Sign in to ChronoZoom" data-enabled="true"></div>
                    </div>
                </li>
                <li class="fleft">
                    <div style="display: none" id="profile-panel">
                        <label for="edit_profile_button" class="auth-panel-login"></label
                        ><div id="edit_profile_button" class="header-icon profile-icon" title="Sign in to ChronoZoom" data-enabled="true"></div>
                    </div>
                </li>
            </ul>
        </div>

            
        <div id="tour_control" class="tour_control fleft">
            <img id="tour_prev" src="images/tour_prev_off.png" alt="previous" />
            <img style="margin: 0 0 0 16px"
                id="tour_playpause" src="images/tour_pause_off.png" alt="play/pause" />
            <img
                style="margin: 0 0 0 16px" id="tour_next" src="images/tour_next_off.png" alt="next" />
            <img style="margin: 0 0 0 10px" id="tour_exit" src="images/tour_exit_off.png"
                alt="exit" />
        </div>
    </div>


    <script src="https://cz-nodelete-chronozoom-test.accesscontrol.windows.net/v2/metadata/IdentityProviders.js?protocol=wsfederation&amp;realm=http%3a%2f%2ftest.chronozoomproject.org%2f&amp;reply_to=&amp;context=&amp;request_id=&amp;version=1.0&amp;callback=ShowSigninPage" type="text/javascript"></script>
    <div id="welcomeScreenBack" class="welcomeScreenBack">
        <div id="welcomeScreenOut" class="welcomeScreenOuterWindow">
            <div id="welcomeScreen" class="welcomeScreen">
                <div class="titleArea">
                    <img class="closeButton" id="welcomeScreenCloseButton" src="/Images/wlcmScreen_close_off.png"
                        alt="Close" onselectstart="return false;" />
                    <div class="title" onselectstart="return false;">
                        <span>Welcome to ChronoZoom beta!</span>
                    </div>
                </div>
                <div class="content">
                    <div class="description">
                        ChronoZoom is an interactive timeline for all of history.
                        <p>Explore all of the past - from the Big Bang, to the dinosours, to ancient and modern history.</p>
                        Click or scroll to navigate through events and timelines. Watch our introduction video for a quick overview of this project.

                        <div style="position: absolute; bottom: 0px;">
                            <button class="button" id="welcomeScreenStartButton">Start Exploring!</button>
                            <div>
                                <input type="checkbox" id="welcomeScreenCheckbox" name="welcomeScreenCheckbox" />
                                <label for="welcomeScreenCheckbox" unselectable="on" style="font-family: Arial; font-size: 16px;">Don't Show Again</label>
                            </div>
                        </div>
                    </div>
                    <div class="media" id="welcomeScreenMedia">
                        <iframe class="player" id="welcomeVideo" src="http://www.youtube.com/embed/3jvJD8Qv5ec" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer">
        <div class="breadcrumbs-nav fleft">
            <div id="breadcrumbs-nav-left">&#171;</div>
        </div>
        <div class="breadcrumbs-container fleft">
            <table id="breadcrumbs-table">
                <tr></tr>
            </table>
        </div>
        <div class="breadcrumbs-nav fleft">
            <div id="breadcrumbs-nav-right" class="">&#187;</div>
        </div>

        <div class="fright">
            <ul>
                <li class="fright">
                    <a class="footer-link" href="http://join.chronozoomproject.org">about</a>
                </li>
                <li class="fright">
                    <a class="footer-link" href="http://join.chronozoomproject.org/forum/forums/chronozoom-beta-feedback/">feedback</a>
                </li>
                <li class="fright">
                    <a class="footer-link" href="http://join.chronozoomproject.org/notices">privacy</a>
                </li>
                <li class="fright">
                    <a class="footer-link" href="http://join.chronozoomproject.org/open-source-project/">help</a>
                </li>
            </ul>
        </div>
        <div class="clearer"></div>
    </div>
</body>
</html>
